<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘 - YDCMS 管理后台</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/fonts/bootstrap-icons.css">
    <style>
        :root {
            --main-blue: #1976d2;
            --main-bg: #f5f7fa;
            --sidebar-bg: #23272f;
            --sidebar-active: #1976d2;
            --sidebar-hover: #2d323c;
            --card-bg: #fff;
            --card-shadow: 0 4px 24px rgba(0,0,0,0.07);
            --border-radius: 14px;
        }
        body {
            background: var(--main-bg);
            font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
        }
        .navbar {
            background: var(--card-bg);
            box-shadow: 0 2px 8px rgba(0,0,0,.04);
            height: 58px;
            z-index: 1020;
        }
        .navbar-brand {
            font-weight: bold;
            font-size: 22px;
            color: var(--main-blue) !important;
            letter-spacing: 1px;
        }
        .user-info {
            color: #666;
            margin-right: 16px;
        }
        .logout-btn {
            border-radius: 6px;
            font-size: 15px;
        }
        .layout {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 220px;
            background: var(--sidebar-bg);
            color: #fff;
            display: flex;
            flex-direction: column;
            padding-top: 58px;
            position: fixed;
            top: 0; left: 0; bottom: 0;
            z-index: 1010;
        }
        .sidebar .nav {
            flex-direction: column;
            gap: 2px;
            margin-top: 18px;
        }
        .sidebar .nav-link {
            color: #bfc8d8;
            font-size: 16px;
            padding: 12px 28px;
            border-radius: var(--border-radius) 0 0 var(--border-radius);
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background .2s, color .2s;
        }
        .sidebar .nav-link.active, .sidebar .nav-link:hover {
            background: var(--sidebar-active);
            color: #fff;
        }
        .sidebar .nav-link i {
            font-size: 20px;
        }
        .main-content {
            flex: 1;
            margin-left: 220px;
            padding: 80px 32px 32px 32px;
        }
        .dashboard-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 32px;
            color: #222;
            letter-spacing: 1px;
        }
        .stat-row {
            display: flex;
            gap: 24px;
            margin-bottom: 32px;
            flex-wrap: wrap;
        }
        .stat-card {
            flex: 1 1 220px;
            min-width: 220px;
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            padding: 32px 0 24px 0;
            text-align: center;
            margin-bottom: 0;
            transition: box-shadow .2s;
        }
        .stat-card .stat-icon {
            font-size: 32px;
            color: var(--main-blue);
            margin-bottom: 10px;
        }
        .stat-card .stat-title {
            font-size: 17px;
            color: #888;
            margin-bottom: 8px;
        }
        .stat-card .stat-value {
            font-size: 40px;
            font-weight: bold;
            color: #222;
        }
        .charts-section {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            padding: 32px 24px;
        }
        .charts-title {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 24px;
            color: var(--main-blue);
        }
        @media (max-width: 991px) {
            .main-content {
                margin-left: 0;
                padding: 80px 8px 8px 8px;
            }
            .sidebar {
                position: static;
                width: 100%;
                height: auto;
                border-right: none;
                border-bottom: 1px solid #e5e7eb;
                padding: 0;
            }
            .stat-row {
                flex-direction: column;
                gap: 16px;
            }
        }
        .sidebar-sub {
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
            background: none;
        }
        .sidebar-sub.open {
            max-height: 500px;
            /* 够大即可 */
        }
        .sidebar-toggle .bi-chevron-down {
            transition: transform 0.3s;
        }
        .sidebar-toggle.active .bi-chevron-down {
            transform: rotate(-180deg);
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/admin/dashboard">YDCMS 管理系统</a>
            <div class="d-flex align-items-center">
                <span class="user-info">欢迎，<?php echo htmlspecialchars($_SESSION['username'] ?? ''); ?></span>
                <a href="/admin/logout" class="btn btn-outline-danger logout-btn">退出</a>
            </div>
        </div>
    </nav>
    <div class="layout">
        <div class="sidebar">
            <div class="sidebar-scroll" style="overflow-y:auto;max-height:calc(100vh - 58px);">
            <ul class="nav" id="sidebarMenu">
                <li class="nav-item">
                    <a class="nav-link active" href="/admin/dashboard"><i class="bi bi-speedometer2"></i>仪表盘</a>
                </li>
                <li class="nav-item">
                    <div class="nav-link sidebar-toggle" data-target="#menu-content"><i class="bi bi-collection"></i>内容管理<i class="bi bi-chevron-down ms-auto"></i></div>
                    <ul class="nav flex-column ms-3 sidebar-sub" id="menu-content" style="display:block;">
                        <li class="nav-item"><a class="nav-link" href="/admin/articles"><i class="bi bi-file-earmark-text"></i>文章管理</a></li>
                        <li class="nav-item"><a class="nav-link" href="/admin/categories"><i class="bi bi-folder2-open"></i>栏目管理</a></li>
                        <li class="nav-item"><a class="nav-link" href="/admin/classifications"><i class="bi bi-diagram-3"></i>分类管理</a></li>
                        <li class="nav-item"><a class="nav-link" href="/admin/tags"><i class="bi bi-tags"></i>标签管理</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="nav-link sidebar-toggle" data-target="#menu-media"><i class="bi bi-images"></i>媒体管理<i class="bi bi-chevron-down ms-auto"></i></div>
                    <ul class="nav flex-column ms-3 sidebar-sub" id="menu-media" style="display:none;">
                        <li class="nav-item"><a class="nav-link" href="/admin/media"><i class="bi bi-image"></i>图片管理</a></li>
                        <li class="nav-item"><a class="nav-link" href="/admin/files"><i class="bi bi-file-earmark"></i>文件管理</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="nav-link sidebar-toggle" data-target="#menu-user"><i class="bi bi-person-badge"></i>用户权限<i class="bi bi-chevron-down ms-auto"></i></div>
                    <ul class="nav flex-column ms-3 sidebar-sub" id="menu-user" style="display:none;">
                        <li class="nav-item"><a class="nav-link" href="/admin/users"><i class="bi bi-people"></i>用户管理</a></li>
                        <li class="nav-item"><a class="nav-link" href="/admin/roles"><i class="bi bi-person-lines-fill"></i>角色管理</a></li>
                        <li class="nav-item"><a class="nav-link" href="/admin/permissions"><i class="bi bi-shield-lock"></i>权限管理</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/templates"><i class="bi bi-layout-text-window"></i>模板管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/api"><i class="bi bi-plug"></i>API管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/performance"><i class="bi bi-graph-up"></i>性能优化</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/testing"><i class="bi bi-bug"></i>测试与部署</a>
                </li>
                <li class="nav-item">
                    <div class="nav-link sidebar-toggle" data-target="#menu-settings"><i class="bi bi-gear"></i>系统设置<i class="bi bi-chevron-down ms-auto"></i></div>
                    <ul class="nav flex-column ms-3 sidebar-sub" id="menu-settings" style="display:none;">
                        <li class="nav-item"><a class="nav-link" href="/admin/settings"><i class="bi bi-sliders"></i>基础设置</a></li>
                        <li class="nav-item"><a class="nav-link" href="/admin/security"><i class="bi bi-shield-check"></i>安全设置</a></li>
                        <li class="nav-item"><a class="nav-link" href="/admin/backup"><i class="bi bi-cloud-arrow-down"></i>备份还原</a></li>
                    </ul>
                </li>
            </ul>
            </div>
        </div>
        <div class="main-content">
            <div class="dashboard-title">仪表盘</div>
            <div class="stat-row">
                <div class="stat-card">
                    <div class="stat-icon"><i class="bi bi-file-earmark-text"></i></div>
                    <div class="stat-title">文章总数</div>
                    <div class="stat-value">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="bi bi-folder2-open"></i></div>
                    <div class="stat-title">栏目总数</div>
                    <div class="stat-value">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="bi bi-people"></i></div>
                    <div class="stat-title">用户总数</div>
                    <div class="stat-value">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="bi bi-tags"></i></div>
                    <div class="stat-title">标签总数</div>
                    <div class="stat-value">0</div>
                </div>
            </div>
            <div class="charts-section">
                <div class="charts-title"><i class="bi bi-bar-chart"></i> 数据趋势图</div>
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <canvas id="barChart"></canvas>
                    </div>
                    <div class="col-md-6 mb-4">
                        <canvas id="lineChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/chart.min.js"></script>
    <script>
        // 柱状图
        const barCtx = document.getElementById('barChart').getContext('2d');
        new Chart(barCtx, {
            type: 'bar',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    label: '文章发布数',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: '#1976d2',
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                }
            }
        });
        // 折线图
        const lineCtx = document.getElementById('lineChart').getContext('2d');
        new Chart(lineCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    label: '用户增长',
                    data: [2, 4, 8, 12, 18, 22],
                    borderColor: '#43a047',
                    backgroundColor: 'rgba(67,160,71,0.1)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                }
            }
        });
        // 手风琴菜单交互（带动画）
        document.querySelectorAll('.sidebar-toggle').forEach(function(toggle) {
            toggle.addEventListener('click', function() {
                document.querySelectorAll('.sidebar-toggle').forEach(function(tg) {
                    if (tg !== toggle) tg.classList.remove('active');
                });
                document.querySelectorAll('.sidebar-sub').forEach(function(sub) {
                    if ('#'+sub.id === toggle.getAttribute('data-target')) {
                        if (sub.classList.contains('open')) {
                            sub.classList.remove('open');
                            toggle.classList.remove('active');
                        } else {
                            sub.classList.add('open');
                            toggle.classList.add('active');
                        }
                    } else {
                        sub.classList.remove('open');
                    }
                });
            });
        });
        // 默认只展开内容管理
        document.querySelector('.sidebar-toggle[data-target="#menu-content"]').classList.add('active');
        document.getElementById('menu-content').classList.add('open');
    </script>
</body>
</html> 